import { MinerStatService } from './miner-stat.service';
import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mode = 'table';

  tableData = [];

  echartsOption: any;

  coordDate = [
    {
      coordTable: 'CO_DATE',
      coordKey: 'DATE_CODE',
      subCoordKey: 'DATE_CODE',
      subCoordTable: 'CO_DATE',
      subCoordLabel: 'DATE_SHORT_DESC',
      label: '日期'
    }, {
      coordTable: 'CO_DATE',
      coordKey: 'DATE_CODE',
      subCoordKey: 'WEEK_DAY_CODE',
      subCoordTable: 'CO_WEEK_DAY',
      subCoordLabel: 'WEEK_LONG_DESC',
      label: '周'
    }, {
      coordTable: 'CO_DATE',
      coordKey: 'DATE_CODE',
      subCoordKey: 'MONTH_CODE',
      subCoordTable: 'CO_MONTH',
      subCoordLabel: 'MONTH_LONG_DESC',
      label: '月'
    }, {
      coordTable: 'CO_DATE',
      coordKey: 'DATE_CODE',
      subCoordKey: 'QUARTER_CODE',
      subCoordTable: 'CO_QUARTER',
      subCoordLabel: 'QUARTER_LONG_DESC',
      label: '季度'
    }, {
      coordTable: 'CO_DATE',
      coordKey: 'DATE_CODE',
      subCoordTable: 'CO_HALF_YEAR',
      subCoordKey: 'HALF_YEAR_CODE',
      subCoordLabel: 'HALF_LONG_DESC',
      label: '半年'
    }, {
      coordTable: 'CO_DATE',
      coordKey: 'DATE_CODE',
      subCoordKey: 'YEAR_CODE',
      subCoordTable: 'CO_YEAR',
      subCoordLabel: 'YEAR_SHORT_DESC',
      label: '年'
    }
  ];

  coordTime = [
    {
      coordTable: 'CO_TIME',
      coordKey: 'TIME_CODE',
      subCoordKey: 'TIME_CODE',
      subCoordTable: 'CO_TIME',
      subCoordLabel: 'TIME_CODE',
      label: '一分钟'
    }, {
      coordTable: 'CO_TIME',
      coordKey: 'TIME_CODE',
      subCoordKey: 'FIVE_MIN_DISC',
      subCoordTable: 'CO_TIME',
      subCoordLabel: 'FIVE_MIN_DISC',
      label: '五分钟'
    }, {
      coordTable: 'CO_TIME',
      coordKey: 'TIME_CODE',
      subCoordKey: 'TEN_MIN_DISC',
      subCoordTable: 'CO_TIME',
      subCoordLabel: 'TEN_MIN_DISC',
      label: '十分钟'
    }, {
      coordTable: 'CO_TIME',
      coordKey: 'TIME_CODE',
      subCoordTable: 'CO_TIME',
      subCoordKey: 'FIFTEEN_MIN_DISC',
      subCoordLabel: 'FIFTEEN_MIN_DISC',
      label: '十五分钟'
    }, {
      coordTable: 'CO_TIME',
      coordKey: 'TIME_CODE',
      subCoordKey: 'HALF_HOUR_DISC',
      subCoordTable: 'CO_TIME',
      subCoordLabel: 'HALF_HOUR_DISC',
      label: '半小时'
    }, {
      coordTable: 'CO_TIME',
      coordKey: 'TIME_CODE',
      subCoordKey: 'ONE_HOUR_DISC',
      subCoordTable: 'CO_TIME',
      subCoordLabel: 'ONE_HOUR_DISC',
      label: '一小时'
    }
  ];

  selectedCoordDate: any;
  selectedCoordTime: any;

  constructor(public remote: MinerStatService) {
    this.selectedCoordDate = this.coordDate[0];
    this.selectedCoordTime = this.coordTime[0];
  }

  onToggle() {
    if (this.mode === 'table') {
      this.mode = 'diagram';
    } else {
      this.mode = 'table';
    }
  }

  onChangeCoordDate(item: any): any {
    this.tableData = [];
    this.selectedCoordDate = item;
    this.remote.loadStat({ coords: [this.selectedCoordDate, this.selectedCoordTime] }).then(
      (res: any) => {
        this.tableData = res;

        const axis = [];
        const data = [];
        for (const idx in res) {
          if (idx != null) {
            axis.push(res[idx].C1 + ' ' + res[idx].C2);
            data.push(res[idx].C3);
          }
        }


        this.echartsOption = {
          title: {
            text: '分时矿机代理连接数量高峰图'
          },
          tooltip: {},
          xAxis: {
            data: axis
          },
          yAxis: {},
          series: [{
            name: '时间',
            type: 'bar',
            data: data
          }]
        };
      }
    );



  }

  onChangeCoordTime(item: any): any {
    this.tableData = [];
    this.selectedCoordTime = item;
    this.remote.loadStat({ coords: [this.selectedCoordDate, this.selectedCoordTime] }).then(
      (res: any) => {
        this.tableData = res;

        const axis = [];
        const data = [];
        for (const idx in res) {
          if (idx != null) {
            axis.push(res[idx].C1 + ' ' + res[idx].C2);
            data.push(res[idx].C3);
          }
        }


        this.echartsOption = {
          title: {
            text: '分时矿机代理连接数量高峰图'
          },
          tooltip: {},
          xAxis: {
            data: axis
          },
          yAxis: {},
          series: [{
            name: '时间',
            type: 'bar',
            data: data
          }]
        };

      }
    );
  }
}
